<template>
  <div id="app">
    <AddPanel ref="AddPanel"/>
    <el-button @click="addPanel" type="primary">添加Panel</el-button>
    <div :style="wrap">
      <canvas id="canvas"></canvas>
      <div id="my-chart" :style="echartsBox"></div>
    </div>
  </div>
</template>

<script>
import {fabric} from 'fabric'

import * as echarts from 'echarts'
import AddPanel from "./AddPanel.vue";

const rectWidth = 400;
const rectHeight = 600;
export default {
  components: {
    AddPanel,
  },
  data() {
    return {
      echartsBox: {
        width: '100%',
        height: '100%',
        border: '1px solid red',
        position: 'absolute',
        top: 0,
        left: 0,
      },
      wrap: {
        position: 'relative',
        width: '400px',
        height: '600px',
        border: '1px solid black',
      }
    }
  },
  mounted() {
    this.setChartsOptions()
    this.setLayout()
  },
  methods: {
    setChartPanelInfoSimple() {
      const gridComponent = this.demoChart.getModel().getComponent('grid');
      const {width, height, x, y} = gridComponent.coordinateSystem.getRect();
      this.layoutInfo.left = x
      this.layoutInfo.top = y
      this.layoutInfo.width = width
      this.layoutInfo.height = height
    },
    addPanel() {
      this.$refs.AddPanel.show()
    },
    setLayout() {
      let layout = {
        mainWidth: 400,
        mainHeight: 600,
        area: [
          {
            name: 'A',
            x1: 0,
            y1: 600,
            x2: 200,
            y2: 400,
            point: [
              {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},
              {name: 'AB', x1: 50, y1: 600, x2: 100, y2: 550},
              {name: 'AC', x1: 100, y1: 600, x2: 150, y2: 550},
              {name: 'AD', x1: 150, y1: 600, x2: 200, y2: 550},
              {name: 'BA', x1: 0, y1: 550, x2: 50, y2: 500},
              {name: 'BB', x1: 50, y1: 550, x2: 100, y2: 500},
              {name: 'BC', x1: 100, y1: 550, x2: 150, y2: 500},
              {name: 'BD', x1: 150, y1: 550, x2: 200, y2: 500},
              {name: 'CA', x1: 0, y1: 500, x2: 50, y2: 450},
              {name: 'CB', x1: 50, y1: 500, x2: 100, y2: 450},
              {name: 'CC', x1: 100, y1: 500, x2: 150, y2: 450},
              {name: 'CD', x1: 150, y1: 500, x2: 200, y2: 450},
              {name: 'EA', x1: 0, y1: 450, x2: 50, y2: 500},
              {name: 'EB', x1: 50, y1: 450, x2: 100, y2: 500},
              {name: 'EC', x1: 100, y1: 450, x2: 150, y2: 500},
              {name: 'ED', x1: 150, y1: 450, x2: 200, y2: 500},
            ]
          },
          {
            name: 'B',
            x1: 200,
            y1: 600,
            x2: 400,
            y2: 400,
            point: [
              {name: 'BE', x1: 200, y1: 600, x2: 300, y2: 400},
              {name: 'BF', x1: 300, y1: 600, x2: 400, y2: 400},
            ]
          },
        ]
      }
      let {mainWidth, mainHeight, area} = layout
      const canvas = new fabric.Canvas('canvas', {
        width: mainWidth, // 画布宽度
        height: mainHeight, // 画布高度
        backgroundColor: 'white', // 画布背景色
      })
      for (let it of area) {
        //先添加点大Q里面的每个点
        for (let it2 of it.point) {
          let {x1, y1, x2, y2, name} = it2
          let width = Math.abs(x2 - x1)
          let height = Math.abs(y2 - y1)
          let rect = new fabric.Rect({
            width,
            height,
            fill: 'white',
            stroke: 'black',        // 边框颜色
            strokeWidth: 1,
            originX: 'center',
            originY: 'center',
          });
          const text = new fabric.Text(name, {
            fontSize: 16,
            fill: '#000',
            originX: 'center',
            originY: 'center',
          })

          const group = new fabric.Group([rect, text], {
            left: x1,
            top: mainHeight - y1,
            originX: 'left',
            originY: 'top',
          });
          canvas.add(group);
        }
        //最后添加大Q区域文字
        canvas.add(new fabric.Text(it.name, {
          fontSize: 100,
          fill: 'gray',
          opacity: 0.3,
          originX: 'left',
          originY: 'top',
          left: it.x1 + Math.abs(it.x2 - it.x1) / 2 - 30,//X1坐标加区域宽度一半再减去自身宽度一半
          top: mainHeight - it.y2 - Math.abs(it.y1 - it.y2) / 2 - 50//总高度减去右下角y2再减去区域宽度绝对值再减去自身,
        }))
      }
    },
    setChartsOptions() {
      // 随机生成散点数据
      function randomScatterData(count, xMin, xMax, yMin, yMax) {
        let data = [];
        for (let i = 0; i < count; i++) {
          let x = (Math.random() * (xMax - xMin) + xMin).toFixed(2);
          let y = (Math.random() * (yMax - yMin) + yMin).toFixed(2);
          data.push([+x, +y]);
        }
        return data;
      }

      let scatterData = randomScatterData(50, 0, 400, 0, 600);

      let option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `x: ${params.data[0]}, y: ${params.data[1]}`;
          }
        },
        xAxis: {

          type: 'value',
          splitLine: {show: false}
        },
        yAxis: {

          type: 'value',
          splitLine: {show: false}
        },
        series: [
          {
            type: 'scatter',
            data: scatterData,
            symbolSize: 6
          }
        ]
      };
      let myChart = echarts.init(document.getElementById('my-chart'));
      myChart.setOption(option);

    }
  }
}
</script>